<template>
  <el-dialog :title="title" :visible="visible" width="600px" @close="close">
    <el-form label-position="left" label-width="80px">
        <el-form-item label="订单编号">
            <el-input placeholder="订单编号" v-model="orderId" disabled></el-input>
        </el-form-item>
        <el-form-item :label="twiceLabel">
            <el-input :readonly="twiceReadonly" v-model="content"  type="textarea" :rows="5" :placeholder="title"></el-input>
        </el-form-item>
    </el-form>
    

    <div slot="footer" class="dialog-footer">
    <el-button @click="cancel">取 消</el-button>
    <el-button type="primary" @click="confirm">确 定</el-button>
  </div>
  </el-dialog>
</template>

<script>
export default {
    props:{
        visible:{
            type:Boolean,
            default:false
        },
        title:{
            type:String,
            default:''
        },
        twiceLabel:{
            type:String,
            default:''
        },
        twiceReadonly:{
            type: Boolean,
            default:false
        },
        id:{
            type:[Number,String],
            default:''
        },
        orderId:{
            type:[Number,String],
            default:''
        },
        desc:{
            type:String,
            default:''
        },
    },
    data(){
        return {
            content:''
        }
    },
    methods:{
        cancel(){
            this.$emit('cancel',false)
        },
        confirm(){
            this.$emit('confirm', this.id, this.content)
        },
        close(){
            this.$emit('cancel', false)
        }
    },
    watch:{
       visible(newVal){
            if(newVal){
                this.content = this.desc
            }
       }
    }
};
</script>

<style lang="scss" scoped>
.dialog-footer{
    text-align: center;
}
</style>
